<!DOCTYPE html>
<html>
<head>
    <title>GearConstraint demo - p2.js physics engine</title>
    <script src="../build/p2.js"></script>
    <script src="../build/p2.renderer.js"></script>
    <link href="css/demo.css" rel="stylesheet"/>
    <meta name="description" content="Demonstrates the GearConstraint that syncs the rotation of two bodies with some gear ratio.">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script>

        // Create demo application
        var app = new p2.WebGLRenderer(function(){

            var world = new p2.World({
                gravity : [0,-10]
            });

            this.setWorld(world);

            // Create first circle
            bodyA = new p2.Body({
                mass: 1,
                position: [-2,0],
                angle: Math.PI/2,
                angularVelocity : -5,
            });
            bodyA.addShape(new p2.Circle({ radius: 1 }));
            world.addBody(bodyA);

            // Create second circle
            bodyB = new p2.Body({
                mass: 1,
                position: [2,0],
            });
            bodyB.addShape(new p2.Circle({ radius: 1 }));
            world.addBody(bodyB);

            // Create a dummy body that we can hinge them to
            var dummyBody = new p2.Body();
            world.addBody(dummyBody);

            // Hinge em
            revoluteA = new p2.RevoluteConstraint(dummyBody, bodyA, {
                worldPivot: bodyA.position
            });
            revoluteB = new p2.RevoluteConstraint(dummyBody, bodyB, {
                worldPivot: bodyB.position
            });
            world.addConstraint(revoluteA);
            world.addConstraint(revoluteB);

            // Add gear
            gearConstraint = new p2.GearConstraint(bodyA,bodyB,{ ratio: 2 });
            world.addConstraint(gearConstraint);
        });

    </script>
</body>
</html>
